import React from 'react';
import { Layout, Tabs, Button } from 'antd';
import LayoutContext from '../../stores/LayoutContext';
import BaseMenu from '../BaseMenu';

const { TabPane } = Tabs;
const { Content, Sider } = Layout;

export default function PageContent(props: any) {
  // 引入公共数据
  const counter = LayoutContext.useContainer();

  // 菜单伸缩参数
  const [collapsed, setCollapse] = React.useState(false);

  // 上下结构 有左侧菜单栏时 内容区的样式
  const [contentStyle, setContentStyle] = React.useState({
    marginLeft: 200,
    transition: 'all 0.2s',
  });
  /**
   * 控制菜单伸缩
   * @param collapsed
   */
  const onCollapse = (collapsed: boolean) => {
    setCollapse(collapsed);
    // 控制菜单伸缩 时内容区的样式
    collapsed
      ? setContentStyle({ transition: 'all 0.2s', marginLeft: 80 })
      : setContentStyle({ marginLeft: 200, transition: 'all 0.2s' });
  };

  // const [newTabIndex, setNewTabIndex] = React.useState(0);
  // const panes = new Array(2).fill(null).map((_, index) => {
  //   const id = String(index + 1);
  //   return { title: `Tab ${id}`, content: `Content of Tab Pane ${id}`, key: id };
  // });
  // this.state = {
  //   activeKey: panes[0].key,
  //   panes,
  // };

  // const onChange = activeKey => {
  //   this.setState({ activeKey });
  // };

  // const onEdit = (targetKey, action) => {
  //   this[action](targetKey);
  // };

  // const add = () => {
  //   const { panes } = this.state;
  //   const activeKey = `newTab${this.newTabIndex++}`;
  //   panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
  //   this.setState({ panes, activeKey });
  // };

  // const remove = targetKey => {
  //   let { activeKey } = this.state;
  //   let lastIndex;
  //   this.state.panes.forEach((pane, i) => {
  //     if (pane.key === targetKey) {
  //       lastIndex = i - 1;
  //     }
  //   });
  // }

  return (
    <Content
      style={
        counter.fixedHeaderStyle
          ? {
            height: '91vh',
            overflow: 'auto',
          }
          : undefined
      }
    >
      {
        // 判断是否需要显示 contentSider
        counter.contentSider ? (
          <Layout className="site-layout-background">
            <Sider
              style={
                // 左侧菜单固定与否
                counter.fixedSiderStyle
                  ? {
                    overflow: 'auto',
                    height: '100vh',
                    position: 'fixed',
                    left: 0,
                  }
                  : undefined
              }
              theme={counter.menuTheme}
              className="site-layout-background"
              collapsible
              collapsed={collapsed}
              onCollapse={onCollapse}
            >
              {/* 菜单列表 */}
              <BaseMenu appInfo={counter.appInfo} mode={counter.mode} />
            </Sider>
            <Content
              style={
                // 左侧菜单固定与否
                counter.fixedSiderStyle ? contentStyle : undefined
              }
            >
              {/* <div>
                  <div style={{ marginBottom: 16 }}>
                    <Button onClick={add}>ADD</Button>
                  </div>
                  <Tabs
                    hideAdd
                    onChange={onChange}
                    activeKey={activeKey}
                    type="editable-card"
                    onEdit={onEdit}
                  >
                    {this.state.panes.map(pane => (
                      <TabPane tab={pane.title} key={pane.key}> */}
              <div
                className="site-layout-background"
                style={{
                  padding: '10px',
                  margin: '15px 15px 0',
                  minHeight: '89vh',
                }}
              >
                {props.children}
              </div>
              {/* </TabPane>
                    ))}
                  </Tabs>
                </div> */}
            </Content>
          </Layout>
        ) : (
          <div
            className="site-layout-background"
            style={
              location.hash === '#/workplace'
                ? {
                  minHeight: '89vh',
                }
                : {
                  padding: '10px',
                  margin: '15px 15px 0',
                  minHeight: '89vh',
                }
            }
          >
            {props.children}
          </div>
        )
      }
    </Content>
  );
}
